<script setup>
import { message } from 'ant-design-vue';
import { ref, onMounted ,watch} from 'vue';
import { useRouter } from 'vue-router';
import { getStatisticsList } from '@/service/services.js';
import { useAccountStore } from '@/stores/account.js';
const account = useAccountStore();
const tableHeight = ref(0);
const name = ref('');
const code = ref('');
const data = ref([]);
const page = ref(1);
const pageSize = ref(15);
const totals = ref(1);
const pageSizeChange = (current, size) => {
	page.value = current;
	pageSize.value = size;
	getInfo();
};
const pageChange = (current, size) => {
	page.value = current;
	pageSize.value = size;
	getInfo();
};
const pagination = ref({
	// 表格分页的配置
	pageSize,
	current: page,
	total: totals,
	showTotal: (totals) => `共 ${totals} 条`,
	onShowSizeChange: pageSizeChange,
	onChange: pageChange
});
const columns = [
	{
		title: '操作',
		key: 'operation',
		fixed: 'left',
		width: 180
	},
	{
		title: '产品名称',
		dataIndex: 'productName',
		key: 'productName'
	},
	{
		title: '产品编码',
		dataIndex: 'productCode',
		key: 'productCode'
	},
	{
		title: '类别',
		dataIndex: 'type',
		key: 'type'
	},
	{
		title: '规格型号',
		dataIndex: 'var1',
		key: 'var1'
	},
	{
		title: '期初库存',
		dataIndex: 'beginCount',
		key: 'beginCount'
	},
	{
		title: '入库数量',
		dataIndex: 'incount',
		key: 'incount'
	},
	{
		title: '出库数量',
		dataIndex: 'outcount',
		key: 'outcount'
	},
	{
		title: '库存数量',
		dataIndex: 'total',
		key: 'total'
	},
	{
		title: '备注',
		dataIndex: 'remark',
		key: 'remark'
	}
];
const router = useRouter();
const getInfo = () => {
	account.spinning = true;
	getStatisticsList({
		productName: name.value,
		productCode: code.value,
		pageNum: page.value,
		pageSize: pageSize.value
	})
		.then((res) => {
			data.value = res.list;
			totals.value = res.total;
			account.spinning = false;
		})
		.catch((err) => {
			account.spinning = false;
			message.error(err);
		});
};
onMounted(() => {
	tableHeight.value = document.getElementById('main').offsetHeight - 220;
	getInfo();
});
watch(
  () => account.currentPrograme,
  (_val, oldVal) => {
    getInfo();
  },
);
const onSearch = () => {
	getInfo();
};
const edit = (i) => {
	console.log(i);
	router.push({ path: '/main/statistics/save', query: i });
};
const exportFile = () => {
	window.location.href = `${
		window.origin
	}/services/statistics/export?token=${sessionStorage.getItem(
		'token'
	)}&productName=${name.value}&productCode=${code.value}`;
};
</script>

<template>
	<section id="container">
		<section class="operation">
			<section class="search">
				<a-input
					v-model:value="name"
					placeholder="请输入产品名称"
					@pressEnter="onSearch"
				/>
				<a-input
					v-model:value="code"
					placeholder="请输入产品编码"
					@pressEnter="onSearch"
					:style="{ marginLeft: '10px' }"
				/>
			</section>
			<section>
				<a-button
					type="primary"
					@click="onSearch"
					:style="{ marginRight: '10px' }"
					>查询</a-button
				>
				<a-button type="primary" @click="exportFile">导出</a-button>
			</section>
		</section>
		<section class="table">
			<a-table
				:columns="columns"
				:data-source="data"
				:scroll="{ y: tableHeight }"
				:pagination="pagination"
			>
				<template #bodyCell="{ column, record }">
					<template v-if="column.key === 'operation'">
						<section class="col">
							<a-button
								type="primary"
								ghost
								:style="{ marginRight: '10px' }"
								@click="edit(record)"
								:disabled="account.level === '3'"
								>修改</a-button
							>
						</section>
					</template>
				</template>
			</a-table>
		</section>
	</section>
</template>

<style scoped>
.search {
	display: flex;
}
.operation {
	display: flex;
	align-content: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.col {
	display: flex;
	align-content: center;
	justify-content: space-between;
}
/* .table {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 76px;
	bottom: 20px;
	overflow: auto;
} */
</style>
